Kuwait Theme: Activity Check-in component #2562
Conversation
There was a problem hiding this comment.
Nice to have this scaffolded out. I assume you're seeing the logic for handling the countdown and unlock as a placeholder that should be replaced by logic that connects to our real system of handling this data? @esmeetewinkel is that something that has been discussed/thought through already, or shall we add it to our meeting agenda?
I would also say that it probably makes sense to style the component to be centred within its div. Laying out the element so that it sits to the side of another element is something that should be handled at the authoring level (i.e. by putting the elements inside a display_group component).
| import { getStringParamFromTemplateRow } from "src/app/shared/utils"; | ||
|
|
||
| interface IActivityCheckInParams { | ||
| id: string; |
There was a problem hiding this comment.
This should be renamed activity_id to improve clarity for authors
| params: Partial<IActivityCheckInParams> = {}; | ||
|
|
||
| countDownDays: number = 6; // Number of days being counted down | ||
| daysLeft: number = 6; // Days until unlock |
There was a problem hiding this comment.
These should be exposed as authorable params
| } | ||
|
|
||
| // Calculates the days until check in | ||
| private checkInTimer() { |
There was a problem hiding this comment.
This logic will need to be reworked to handle how we actually plan on managing the unlock dates of the various activities. @esmeetewinkel, is that something we should discuss in our next meeting?
There was a problem hiding this comment.
Yes let's discuss in our next meeting. My initial thoughts are in my comment below
There was a problem hiding this comment.
I'm not sure how you're proposing to author the "days left". One way that would be intuitive to me is that the component can have a parameter (maybe unlock_at) which is a timestamp of the moment of unlocking. If this parameter value is
- falsy (undefined or empty string): don't show the "days left" progress bar + text. Button is disabled.
- a time stamp in the future: compute how many days left and display progress bar + text. Button is disabled.
- a time stamp in the past: don't show the "days left" progress bar + text. Button is enabled.
Edited: thinking about it further I think we also need something like a start_countdown_at parameter
…pp-builder into feature-kw-check-in-component
…pp-builder into feature-kw-check-in-component
…pp-builder into feature-kw-check-in-component
|
@FaithDaka: @esmeetewinkel and I discussed how we're going to handle the countdown settings, and our plan requires the following: I've authored a new row in the component demo template to represent how the authoring should work, just as an example until the logic to handle the parameters is fleshed out: The proposed changes are:
Then the
|
…pp-builder into feature-kw-check-in-component
PR Checklist
Description
plh_activity_check_increated and styled. Corresponding debug sheet: LinkAuthor Notes
plh_activity_check_incomponent with the followingparameter_list:id: Activity identifier.title: The title of the component attached to the bottomlocked_icon_asset: Icon that appears next to the title while the component is lockedlocked_image_asset: Illustration that appears while component is lockedunlocked_icon_asset: Icon that appears next to the title while the component is unlockedunlocked_image_asset: Illustration that appears while component is unlockedGit Issues
Closes #2539
Screenshots